<!--新闻详情页底部-->
<template>
    <div>
        <div class="footer">
            <van-icon name="like-o" v-if="flag" color="#409EFF" class="love" @click="changLive"></van-icon>
            <van-icon name="like" color="red" v-else class="love" @click="changLive"></van-icon>

            <van-icon name="good-job-o" color="#409EFF" class="like" @click="cliZan" v-if="mezan">
                <span>{{picshufflingFigure.zan}}</span>
            </van-icon>
            <van-icon name="good-job" color="#409EFF" class="like" @click="yesZan" v-else>
                <span>{{picshufflingFigure.zan}}</span>
            </van-icon>

            <span class="reading">阅读量:{{picshufflingFigure.readNum}}</span>
        </div>
    </div>
</template>

<script>

    import {getCollect, getCollectList, addSee, newsDetails, getZan} from "../api/api";


    export default {
        name: "DetailFooter",
        data() {
            return {
                flag: true,
                picshufflingFigure: [],
                mezan: true
            }
        },
        methods: {
            changLive() {
                if (this.$store.state.login.isLogin) {
                    if (!this.flag) {
                        this.$dialog.confirm({
                            title: '提示',
                            message: '您真的确定要取消收藏麽？',
                        }).then(() => {
                            // this.flag = !this.flag;
                            getCollect(this.$route.query.articleId).then(res => {
                                console.log(res)
                                    // this.$toast(res.msg)
                                    this.flag=!this.flag
                            })
                        }).catch(() => {

                        });

                    }else {
                        getCollect(this.$route.query.articleId).then(res => {
                            console.log(res)
                                this.$toast("收藏成功")
                                this.flag=!this.flag
                        })
                    }


                } else {
                    this.flag == this.flag;
                    // this.$toast("请先登录")
                    this.$dialog.confirm({
                        title: '您未处于登录状态',
                        message: '是否去登录',
                    })
                        .then(() => {
                            this.$router.push("/login")
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            },
            cliZan() {
                if (this.$store.state.login.isLogin) {
                    getZan(this.$route.query.articleId).then(res => {
                        this.$toast(res.msg);
                        this.mezan = false;
                        newsDetails(this.$route.query.articleId).then(res => {
                            // console.log(res)
                            this.picshufflingFigure = res.data
                        })
                    })
                } else {
                    // this.$toast("请先登录");
                    this.$dialog.confirm({
                        title: '您未处于登录状态',
                        message: '是否去登录',
                    })
                        .then(() => {
                            this.$router.push("/login")
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            },
            yesZan() {
                this.$toast("已点赞");
            }
        },
        created() {
            getCollectList().then(res => {
                if (res.rows.some(item => item.articleId == this.$route.query.articleId)) {
                    this.flag = false;
                }
            });
            addSee(this.$route.query.articleId).then(res => {
                console.log(res);
                newsDetails(this.$route.query.articleId).then(res => {
                    // console.log(res)
                    this.picshufflingFigure = res.data
                })
            })


        },
    }
</script>

<style scoped lang="less">
    .footer {
        height: 45px;
        line-height: 45px;
        padding: 0px 20px;
        background-color: #FFFFFF;
    }

    .like {
        font-size: 28px !important;
        line-height: 45px;
        margin: 0px 20px;

        span {
            float: right;
            margin-top: -10px;
            color: #999;
            font-size: 12px;
        }
    }

    .reading {
        float: right;
        color: #409EFF;
        line-height: 45px;
        margin-right: 20px;
    }

    .love {
        font-size: 30px !important;
    }
</style>